<!DOCTYPE html>
<html>

<head>
  <title>扇形图形</title>
  <style>
    ol {
      display: flex;
      list-style: none;
    }

    ol>li {
      font-family: 隶书, 宋体;
      margin-right: 30px;
      letter-spacing: 0;
      font-size: 20px;
      background-color: transparent;
    }

    ol>li:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    canvas {
      transition: transform 0.3s;
      opacity: 1;
      position: absolute;
      left: calc(50% - 100px);
      top: 50%;
      transform: translate(-50%, -50%);
    }

    canvas.hover {
      transform: scale(1.2) translate(-50%, -50%);
    }
    .shiyan{
	position: absolute;
	top: 100px;
	height: 1600px;
    width: 250px;
	background-color: #282c34;
}
  </style>
</head>

<body>
  <div class="shiyan">
 
 
  </div>
  <ol>
    <li class="y01">情绪6%</li>
    <li class="y02">忧郁10%</li>
    <li class="y03">狂躁20%</li>
    <li class="y04">焦虑38%</li>
    <li class="y05">障碍28%</li>
  </ol>

  <canvas id="myCanvas01" width="200" height="200"></canvas>
  <canvas id="myCanvas02" width="200" height="200"></canvas>
  <canvas id="myCanvas03" width="200" height="200"></canvas>
  <canvas id="myCanvas04" width="200" height="200"></canvas>
  <canvas id="myCanvas05" width="200" height="200"></canvas>

  <script>
    var canvas01 = document.getElementById("myCanvas01");
    var canvas02 = document.getElementById("myCanvas02");
    var canvas03 = document.getElementById("myCanvas03");
    var canvas04 = document.getElementById("myCanvas04");
    var canvas05 = document.getElementById("myCanvas05");

    var canvases = [canvas01, canvas02, canvas03, canvas04, canvas05];

    var colors = ["green", "purple", "red", "blue", "yellow"];

    for (var i = 0; i < canvases.length; i++) {
      var canvas = canvases[i];
      var ctx = canvas.getContext("2d");
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 100;
      var startAngle = ((180 - 90 + i * 75) * Math.PI) / 180;
      var endAngle = ((180 - 15 + i * 75) * Math.PI) / 180;

      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
      ctx.closePath();
      ctx.fillStyle = colors[i];
      ctx.fill();
    }

    var lis = document.querySelectorAll("ol > li");

    lis.forEach(function (li, index) {
      li.addEventListener("mouseover", function () {
        canvases[index].classList.add("hover");
      });

      li.addEventListener("mouseout", function () {
        canvases[index].classList.remove("hover");
      });
    });
  </script>
</body>

</html>